const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 为了让postcss生效而设置的环境变量
// process.env.NODE_ENV = 'development'

module.exports = {
  entry: resolve(__dirname, './src/js/index.js'),
  output: {
    filename: 'js/built.js',
    // 输出到的文件夹
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // 预设：指示babel做兼容性处理
          // 也就是转化为es5，可是这个方法不行啊。
          // 这是基本的js兼容处理，无法处理promise
          presets: [
            [
              // 基本的兼容
              '@babel/preset-env',
              // 按需兼容
              {
                useBuiltIns: 'usage',
                corejs: { version: 3 },
                // 指定兼容性做到哪个版本的浏览器
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '11',
                  safari: '10',
                  edge: '17',
                },
              },
            ],
          ],
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './src/index.html'),
    }),
  ],
  // mode: 'production',
  mode: 'development',
}
